<template>
    <div id="Main">
      <el-input placeholder="请输入链接" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend">
          <el-option label="生成短链接" value="1"></el-option>
          <el-option label="查询原链接" value="2"></el-option>
          <el-option label="临时短链接" value="3" disabled></el-option>
        </el-select>
        <el-button @click="checkURL ()" slot="append" :icon="loadstatuslist[loadstatusindex]"></el-button>
      </el-input>
      <MainShow :inputUrl='input' :UrlRes='UrlRes' :ShowMsg='ShowMsg' :PostStatus='PostStatus'></MainShow>
    </div>
</template>

<script>
import { Notification } from 'element-ui'
import MainShow from './MainShow'
export default {
  name: 'Main',
  components: {
    MainShow
  },
  data () {
    return {
      input: '',
      select: '1',
      loadstatuslist: [
        'el-icon-search',
        'el-icon-loading',
        'el-icon-close'
      ],
      loadstatusindex: 0,
      UrlRes: '',
      ShowMsg: false,
      PostStatus: false
    }
  },
  methods: {
    ChangeLoadStatus () {
      this.loadstatusindex = 1
    },
    ShowNotifiMsg (bool, Msg) {
      if (bool) {
        Notification({
          title: '转换成功',
          message: Msg,
          type: 'success',
          duration: 3000
        })
      } else {
        Notification.error({
          title: '转换失败',
          message: Msg,
          duration: 8000
        })
      }
    },
    checkURL () {
      if (this.input !== '') {
        var reg = /(http|ftp|https)/
        if (!reg.test(this.input)) {
          Notification.error({
            title: 'url输入错误',
            message: '这不是可支持的Url'
          })
        } else {
          console.log(reg.test(this.input))
          this.ChangeLoadStatus()
          this.sendPsot()
        }
      }
    },
    sendPsot () {
      this.axios.post('https://urlapi.kratos.fun/sort', {
        option: this.select,
        url: this.input
      })
        .then(response => {
          // console.log(response)
          // console.log('请求成功：', response.data.sorturl)
          this.$data.loadstatusindex = 0
          this.$data.UrlRes = response.data.sorturl
          this.$data.ShowMsg = true
          this.$data.PostStatus = true
          this.$options.methods.ShowNotifiMsg(response.data.status, response.data.msg)
          if (response.data.status) {
            console.log(response.data.msg)
            console.log(this.$data.ShowMsg)
          } else {
            this.$data.UrlRes = response.data.msg
            this.$data.PostStatus = false
          }
        })
        .catch(error => {
          console.log('请求错误')
          console.log(error)
          this.$data.loadstatusindex = 2
          this.$data.PostStatus = false
          this.$options.methods.ShowNotifiMsg(false, '网络异常，获取失败')
        })
    }
  }
}
</script>

<style>
.el-select .el-input {
    width: 130px;
  }

.el-input-group {
    width: 60% !important;
    line-height: 160px;
    margin-top: 8%;
    margin-bottom: 8%;
  }
</style>
